//封装分类数据
//创建路由实例对象
//导入接口
import { getcatelistapi } from '@/apis/category.js'
import { onMounted, ref, watch, } from 'vue';
//导入获取路由参数
import { useRoute } from 'vue-router'
export function usecate(){
    const route = useRoute()
    //商品数据
    const catedata = ref({})
    //执行接口函数
    const getcatedata = (async () => {
      //如果路由参数里面时:id就是params 
      //如果时？xxx的就是query 
      const res = await getcatelistapi(route.params.id)
      catedata.value = res.result
    })
    //因为相同的路由组件复用不会再次调用生命周期钩子
    //所以当路由发生改变时不会向服务器发送请求，就得不到数据
    //所以监视路由发生改变时，调用接口获得数据
    watch(()=> route.params.id,()=>{
      getcatedata()
    })
    //组件挂载时执行
    onMounted(() => {
      getcatedata()
    })
    return {catedata}
}
